<template>
  <d2-container>
    <el-form
      v-loading="editLoading"
      :rules="rules"
      ref="editForm"
      :model="form"
    >
      <el-form-item
        label="原图"
        :label-width="formLabelWidth"
        style="width:600px"
        prop="oriImg"
        required
      >
        <el-input
          v-show="false"
          v-model="form.oriImg"
          autocomplete="off"
        ></el-input>
        <el-upload
          drag
          action=""
          :on-change="getFile"
          :limit="2"
          :file-list="fileList"
          list-type="picture"
          :auto-upload="false"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>
      <el-form-item
        label="模板ID"
        :label-width="formLabelWidth"
        style="width:600px"
        prop="templateId"
      >
        <el-select clearable v-model="form.templateId" placeholder="请选择模板">
          <el-option
            v-for="template in templates"
            :key="template.id"
            :label="template.id + ':' + template.summary"
            :value="template.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="submit()"
          >截取头像</el-button
        >
        <el-button size="small" type="primary" @click="makeFace()"
          >生成表情</el-button
        >
      </el-form-item>
      <el-image
        :preview-src-list="[headImg]"
        style="width: 300px; height: 300px"
        :src="headImg"
        fit="fill"
      ></el-image>
    </el-form>
  </d2-container>
</template>

<script>
import api from "@/api";
export default {
  data() {
    return {
      templates: [],
      templateSelectLoading: false,
      editLoading: false,
      formLabelWidth: "",
      rules: {
        oriImg: [{ required: true, message: "请上传原始图片", trigger: "blur" }]
      },
      headImg: "",
      fileList: [],
      form: { oriImg: "" }
    };
  },
  computed: {},
  methods: {
    getFile(file, fileList) {
      if (file.raw.type != "image/jpeg" && file.raw.type != "image/png") {
        this.$message({
          message: "仅允许上传jpg、png格式的图片！",
          type: "error"
        });
        this.$nextTick(() => {
          this.fileList = [];
          this.form.oriImg = "";
        });
        return;
      }
      this.getBase64(file.raw).then(res => {
        this.fileList = [{ name: "", url: res }];
        this.form.oriImg = res;
      });
    },
    getBase64(file) {
      return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function() {
          imgResult = reader.result;
        };
        reader.onerror = function(error) {
          reject(error);
        };
        reader.onloadend = function() {
          resolve(imgResult);
        };
      });
    },
    submit() {
      this.$refs.editForm.validate(async valid => {
        if (valid) {
          this.editLoading = true;
          var res = await api.service
            .post("/miniApp/cutFace", this.form)
            .catch(function(error) {});
          if (res) {
            this.$message({
              message: "截取成功！",
              type: "success"
            });
          }
          this.headImg = res;
          this.editLoading = false;
        }
      });
    },
    async templateList() {
      this.templateSelectLoading = true;
      var data = await api.service
        .get("/backManage/templates")
        .catch(function(error) {});
      this.templates = data.records;
      this.templateSelectLoading = false;
    },
    makeFace() {
      if (!this.form.templateId || this.form.templateId == "") {
        this.$message({
          message: "请选择模板ID!",
          type: "error"
        });
        return;
      }
      this.$refs.editForm.validate(async valid => {
        if (valid) {
          this.editLoading = true;
          var res = await api.service
            .post("/miniApp/make", this.form)
            .catch(function(error) {});
          if (res) {
            this.$message({
              message: "成功！",
              type: "success"
            });
          }
          this.headImg = res;
          this.editLoading = false;
        }
      });
    }
  },
  created() {
    this.templateList();
  }
};
</script>
